<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { EOperationStatus } from '@/common/enums'
import { reactive } from 'vue';
import { useToPage } from '@/common/use/common';
// typescript
const { redirectTo, navigateBack } = useToPage();
const state = reactive({
  status: EOperationStatus.SUCCESS,
  title: ""
});
// 设置标题
const setNavTitle = (status: EOperationStatus) => {
  const msg = status == EOperationStatus.SUCCESS ? "支付成功" : "支付失败";
  state.title = msg;
  state.status = status;
  uni.setNavigationBarTitle({title: msg});
}

onLoad((ev) => {
  setNavTitle(ev?.status);
});
</script>

<!-- 操作结果页 -->
<template>
  <view class="container">
    <!-- 操作结果信息 -->
    <view class="status-info">
      <view class="icon-view">
        <view class="icon" :class="{ fail: state.status != EOperationStatus.SUCCESS }">
          <uni-icons v-if="state.status == EOperationStatus.SUCCESS" type="checkmarkempty" color="#fff" size="30"></uni-icons>
          <uni-icons v-else type="closeempty" color="#fff" size="30"></uni-icons>
        </view>
      </view>
      <view class="amount-view">
        <text>2000.00元</text>
        <text>，{{ state.title }}</text>
      </view>
      <view class="button-view">
        <button 
        @click="navigateBack"
        class="custom-button">返回商店</button>
        <button 
        @click="redirectTo('/pages/order-list/order-list')"
        class="custom-button custom-button-primary">查看订单</button>
      </view>
    </view>

    <!-- 推荐商品标题 -->
    <view class="title-view">
      <text>—</text>
      <text>更多推荐</text>
      <text>—</text>
    </view>
    <!-- 推荐商品列表 -->
    <view class="goods-list-view">
      <w-commodity-card-list></w-commodity-card-list>
    </view>
  </view>
</template>

<style scoped lang="scss">
// scss
.status-info {
  background-color: #fff;
}

.icon-view {
  text-align: center;
  padding: 70rpx 0 30rpx;

  .icon {
    display: inline-flex;
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    background-color: $success-color;
    align-items: center;
    justify-content: center;

    &.fail {
      background-color: $uni-color-error;
    }
  }
}

.amount-view {
  text-align: center;
  margin-bottom: 50rpx;
}

.button-view {
  text-align: center;
  padding-bottom: 50rpx;

  button {
    margin-right: 20rpx;
    border-radius: 999px;

    &:last-child {
      margin-right: 0;
    }
  }
}

.title-view {
  margin: 80rpx 0 30rpx;
  text-align: center;
  color: $text-color;

  text {
    &:nth-child(2) {
      padding: 0 10rpx;
      font-size: 28rpx;
    }
  }
}

.goods-list-view {
  background-color: #fff;
}
</style>
